<template>
  <el-table :data="data" border v-loading="loading" @selection-change="handleSelectionChange">
    <!-- 选择列 -->
    <el-table-column type="selection" width="55" v-if="showSelection" />

    <!-- 动态列 -->
    <template v-for="column in columns" :key="column.prop || column.type">
      <!-- 展开行类型列 -->
      <el-table-column v-if="column.type === 'expand'" type="expand" :width="column.width || 50">
        <template #default="scope">
          <slot :name="column.slot" :row="scope.row" :index="scope.$index"></slot>
        </template>
      </el-table-column>

      <!-- 普通数据列 -->
      <el-table-column
        v-else
        :prop="column.prop"
        :label="column.label"
        :width="column.width"
        :formatter="column.formatter"
        :min-width="column.minWidth"
        :align="column.align || 'left'"
        :sortable="column.sortable"
        :fixed="column.fixed"
        :show-overflow-tooltip="column['show-overflow-tooltip']"
      >
        <template #default="scope" v-if="column.slot">
          <slot :name="column.slot" :row="scope.row" :index="scope.$index"></slot>
        </template>
      </el-table-column>
    </template>

    <!-- 操作列 -->
    <el-table-column
      :label="operationLabel"
      :width="operationWidth"
      fixed="right"
      v-if="showOperation"
    >
      <template #default="scope">
        <slot name="operation" :row="scope.row" :index="scope.$index">
          <el-button size="small" @click="$emit('view', scope.row)">查看</el-button>
          <el-button size="small" @click="$emit('edit', scope.row)">编辑</el-button>
          <el-button size="small" type="success" @click="$emit('createParty', scope.row)">
            设为当事人
          </el-button>
        </slot>
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup lang="ts">
  import { ElTable, ElTableColumn, ElButton, ElTag } from 'element-plus'
  import type { Customer } from '@/types/customer'
  import type { TableColumn } from '@/types/common'

  // 定义组件属性
  interface Props {
    data: Customer[]
    loading?: boolean
    columns?: TableColumn[]
    showSelection?: boolean
    showOperation?: boolean
    operationLabel?: string
    operationWidth?: string | number
    showDefaultOperations?: boolean
    getRegionName?: (customer: Customer) => string
    formatAmount?: (amount: number | string | undefined) => string
  }

  const props = withDefaults(defineProps<Props>(), {
    loading: false,
    columns: () => [],
    showSelection: false,
    showOperation: true,
    operationLabel: '操作',
    operationWidth: 200,
    showDefaultOperations: true,
    getRegionName: () => '',
    formatAmount: () => '',
  })

  // 定义事件
  const emit = defineEmits<{
    (e: 'selection-change', selection: Customer[]): void
    (e: 'edit', row: Customer): void
    (e: 'delete', row: Customer): void
    (e: 'view', row: Customer): void
    (e: 'lock', row: Customer): void
    (e: 'unlock', row: Customer): void
    (e: 'distribute', row: Customer): void
    (e: 'createParty', row: Customer): void
  }>()

  // 处理选择变化
  const handleSelectionChange = (selection: Customer[]) => {
    emit('selection-change', selection)
  }
</script>
